<template>
  <div class="fileSelection">
    <el-upload
      action="#"
      list-type="picture-card"
      :file-list="fileList"
      :auto-upload="false"
      :limit="limit"
      :on-change="fileChange"
    >
      <i slot="default" class="el-icon-plus"></i>
      <div slot="file" slot-scope="{ file }">
        <img
          class="el-upload-list__item-thumbnail echoBox"
          :src="file.echoPath"
          alt=""
        />
        <span class="el-upload-list__item-actions">
          <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
          >
            <i class="el-icon-zoom-in"></i>
          </span>
          <!-- <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleDownload(file)"
          >
            <i class="el-icon-download"></i>
          </span> -->
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
          >
            <i class="el-icon-delete"></i>
          </span>
        </span>
      </div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "file-selection",
  props: {
    limit: {
      type: Number,
      default: 3,
    },

    defaultFiles: {
      type: Array,
      default: () => {
        return [
          {
            name: String,
            percentage: Number,
            raw: File,
            size: Number,
            status: String,
            uid: Number,
            url: String,
            echoPath: String,
          },
        ];
      },
    },
  },
  data() {
    return {
      fileList: [],
      dialogImageUrl: "",

      dialogVisible: false,
      disabled: false,

      picTypes: ["png", "jpg", "jpeg", "JPG", "JPEG", "PNG"],
      excelTypes: ["xls", "xlsx", "XLS", "XLSX"],
      wordTypes: ["doc", "docx", "docm", "DOC", "DOCX", "DOCM"],
    };
  },
  watch: {
    defaultFiles(nv, ov) {
      this.fileList = nv;
    },
  },
  created() {},
  mounted() {},
  methods: {
    fileChange(file, fileList) {
      console.log(fileList);
      let fileType = file.name.split(".")[1];
      if (this.picTypes.indexOf(fileType) != -1) {
        this.$set(file, "echoPath", file.url);
        console.log("pic file:", file);
      }
      if (this.excelTypes.indexOf(fileType) != -1) {
        this.$set(
          file,
          "echoPath",
          require("./fileSelectionDefaultPic/ECEL.png")
        );
        console.log("excel file:", file);
      }
      if (this.wordTypes.indexOf(fileType) != -1) {
        this.$set(
          file,
          "echoPath",
          require("./fileSelectionDefaultPic/WORD.png")
        );
        console.log("word file:", file);
      }
      this.fileList.pop();
      this.fileList.push(file);
      console.log("files:", fileList);
      this.fileList = fileList;
    },

    handleRemove(file) {
      this.fileList.splice(
        this.fileList.findIndex((item) => item.uid === file.uid),
        1
      );
      console.log(this.fileList);
    },

    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.echoPath;
      this.dialogVisible = true;
    },

    handleDownload(file) {
      console.log(file);
    },
  },
};
</script>
<style lang="scss" scoped>
.fileSelection {
  font-size: 14px;
  color: #606266;
  margin: 0 80px;
}

.echoBox {
  width: 94% !important;
  height: 94% !important;
  padding: 3% !important;
}
</style>
